
<template>
<div>
  <v-card>
    <v-card-title>
      <v-btn color="info" @click="addBrand">新增品牌</v-btn>
      <v-spacer/>
      <!--搜索框，与search属性关联-->
      <v-text-field label="输入关键字搜索" v-model.lazy="search"
                    append-icon="search" hide-details/>
    </v-card-title>
    <!-- 分割线 -->
    <v-divider/>
    <!--卡片的中部-->

    <v-data-table
      :headers="headers"
      :items="brands"
      :pagination.sync="pagination"
      :total-items="totalBrands"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">

        <td class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.name }}</td>
        <td class="text-xs-center"><img :src="props.item.image"></td>
        <td class="text-xs-center">{{ props.item.letter }}</td>
        <td class="justify-center layout">
          <v-btn flat icon color="pink" @click="editBrand(props.item)">
            <v-icon>edit</v-icon>
          </v-btn>
          <v-btn flat icon color="pink" @click="deleteBrand">
            <v-icon>delete</v-icon>
          </v-btn>
        </td>


        <v-dialog
          v-model="deleteX"
          width="250" persistent>
          <v-card>
            <v-toolbar dense dark color="primary">
              确定删除吗？亲！
            </v-toolbar>

            <v-btn @click="qdd(props.item)" >确定</v-btn>
            <v-btn @click="closeWindowD">取消</v-btn>
          </v-card>

        </v-dialog>




      </template>
    </v-data-table>
  </v-card>


  <v-dialog
    v-model="show"
    width="500" persistent>
    <v-card>
      <!--对话框的标题-->
      <v-toolbar dense dark color="primary">
      <v-card-title>{{isEdit ? '修改':'新增'}}品牌</v-card-title>
        <v-spacer/>
        <v-btn icon="" @click="closeWindow"><v-icon>close</v-icon></v-btn>
      </v-toolbar>
      <!--引入子组件MyBrandForm-->
      <my-brand-form @close="closeWindow"
      :oldBrand="oldBrand"
      :isEdit="isEdit">
        <!--获取brand数据传递给子组件-->
      </my-brand-form>

    </v-card>

  </v-dialog>




</div>





</template>

<script>
  import MyBrandForm from './MyBrandForm'
    export default {
        name: "MyBrand",
      components:{
          MyBrandForm
      },
        data(){
         return{
           headers:[
             {text: "品牌id", value: "id", align: 'center', sortable: true},
             {text: "品牌名称", value: "name", align: 'center', sortable: false},
             {text: "LOGO", value: "image", align: 'center', sortable: false},
             {text: "品牌的首字母", value: "letter", align: 'center', sortable: true},
             {text: "操作", align: 'center', sortable: false},
           ],
           brands:[], //当前页品牌数据
           pagination:{}, //分页信息
           totalBrands: 0, //总条数
           loading: true, //进度条是否加载
           search:"" ,//搜索过滤字段
           show: false, //控制对话框属性
           oldBrand:{},//即将被编译的品牌数据
           isEdit:false, //是否编辑
           deleteX: false //控制删除对话框属性
         }
        },
      created() {
          this.getDataFromServer()
      },
      watch:{
        search(){
          this.getDataFromServer()

          },
        pagination:{
            deep:true,
          handler(){
              this.getDataFromServer()
          }
        }
      },
      methods:{
        qdd(oldBrand){
          this.$http.delete("item/brand/bid/"+oldBrand.id).then(()=>{

            this.$message.success("删除成功");
            this.getDataFromServer()
          }).catch(() => {
            this.$message.error("删除失败")
          });
          this.deleteX=false
          },
        deleteBrand(){
          this.deleteX=true;
        },


        editBrand(oldBrand){
          //根据品牌信息查询商品分类
          this.$http.get("/item/category/bid/"+oldBrand.id)
            .then(resp=>{
              //获取要编辑的Brand
              this.oldBrand=oldBrand;
              //回显商品分类
              this.oldBrand.categories=resp.data;
              //修改标记
              this.isEdit=true;
              //控制弹窗可见
              this.show=true;
            })
        },

        addBrand(){
          //修改标记
          this.isEdit=false;
          //控制弹窗可见
          this.show=true;
          //把oldBrand变为NULL
          this.oldBrand=null;
        },
        closeWindowD(){
          this.deleteX=false;
        },
        closeWindow(){
          //关闭窗口
          this.show=false;
          //关闭窗口后重新加载数据
          this.getDataFromServer();
        },
        getDataFromServer(){
            this.$http.get("/item/brand/page",{
              params:{
                page:this.pagination.page,
                rows:this.pagination.rowsPerPage,
                sortBy:this.pagination.sortBy,
                desc:this.pagination.descending,
                key:this.search
              }
            }).then(resp=>{
              this.brands = resp.data.items;
              this.totalBrands = resp.data.total;
              // 完成赋值后，把加载状态赋值为false
              this.loading = false;
            })
          }

      }
    }
</script>

<style scoped>

</style>
